<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:q="http://huliqing.name/qfaces"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="/example/_template.xhtml">
	<ui:define name="title"> Calendar </ui:define>
	<ui:define name="header"> Calendar </ui:define>
	<ui:define name="content">
		<style type="text/css">
			.calendarBody {width:400px;height:200px;}
			.dayOfMonth {padding:3px;width:30px;}
			.actionDate {padding:3px;width:30px;background:#CCC;color:white;}
			.dayOnmouseover {padding:3px;width:30px;background:blue;color:white;cursor:pointer;}
			.dayCurrent {padding:3px;width:28px;border:1px dotted gray;}
		</style>
		<div style="width:600px;margin:0 auto;">
	
			<h3> Demo 1 作为日期选择器 </h3>
			<hr />
			<h:form>
				<q:calendar id="cal1"
					renderAsPop="true"
					value="#{calendarBean.date1}" 
					drag="true"
					/>
				<q:validator for="cal1" required="true" messageError="必要的" />
				<br />
				<h:commandButton value="Submit" />
			</h:form>
			
				
			<h3 style="margin-top:100px;"> Demo 2 作为事件日历的示例(定制,更多参数请查看文档) </h3>
			<hr />
			<h:form>
				<h:inputText id="input1" required="true" requiredMessage="必要的"/>
				<h:message for="input1" style="color:red" />
				<h:panelGroup binding="#{calendarBean.uiPanel}" />
				<h:commandButton value="从后台生成日历组件" 
					action="#{calendarBean.createCalendar}" 
					immediate="true" />
				<h:commandButton value="从后台移除日历组件" 
					action="#{calendarBean.removeCalendar}" 
					immediate="true" />
				<br />
				<h:commandButton value="提交" />
			</h:form>
			
			
			
			
			<h3 style="margin-top:100px;"> Demo 3 作为事件日历的示例(定制,更多参数请查看文档) </h3>
			<hr />
			<q:calendar 
				listener="#{calendarBean.listener}" 
				renderBorder="false"
				imgPreviousSrc="/example/res/image/previous.png" 
				imgNextSrc="/example/res/image/next.png" 
				
				styleClassCalendarBody="calendarBody"
				styleClassActionDate="actionDate"
				styleClassDayOnmouseover="dayOnmouseover"
				styleClassDayOfMonth="dayOfMonth"
				styleClassDayCurrent="dayCurrent"
				/>

		</div>
	</ui:define>

	<ui:define name="description">
		功能齐全的日历组件，可以作为一般的日历组件使用，也可以作为日期选择器。
		支持相当完整的样式定制。
		提供了相关的js接口。使用相当简单。
		具体请查看文档
	</ui:define>

	<ui:define name="htmlCode">
		<h:outputText value="#{calendarBean.htmlCode}" />
	</ui:define>

	<ui:define name="javaCode">
		<h:outputText value="#{calendarBean.javaCode}" />
	</ui:define>
</ui:composition>